<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            /* 
                需求使首字母G下沉
            */
            /* 第一种方式 */
            /* p {
                font-size: 20px;
            }
            span {
                font-size: 50px;
            } */

            /* 
                伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
                    伪元素使用::开头
                    ::first-letter 表示第一个字母

                    ::first-line 表示第一行

                    ::selection 表示选中的内容

                    ::before 元素的开始位置
                    ::after 元素的最后位置
                            - before和after必须结合content属性来使用
            */
            /* 第二种方式 */
            p::first-letter {
                font-size: 50px;
            }
            
            p::first-line {
                background-color: yellow;
            }

            p::selection {
                background-color: yellowgreen;
            }

            div::before {
                /* content
                    这里是表示在标签开始,直接添加内容
                */
                content: 'abc';
                color: red;
            }


            div::after {
                /* content
                    这里是表示在标签结束,直接添加内容
                */
                content: 'hahaha';
                color: blue;
            }


            


        </style>
    </head>
    <body>

        <div>Hello Hello How are you</div>

        <!-- 第一种方式 -->
        <!-- <p><span>G</span>
            reat things happen when developers work together—from teaching and
            sharing knowledge to building better software. Teletype for Atom
            makes collaborating on code just as easy as it is to code alone,
            right from your editor.
        </p> -->
        <!-- 第二种方式 -->
        <p>Great things happen when developers work together—from teaching and
            sharing knowledge to building better software. Teletype for Atom
            makes collaborating on code just as easy as it is to code alone,
            right from your editor.</p>

    </body>
</html>